<template>
  <div class="questionBody">
    <div style="text-align: left !important" class="questionHead">
      <el-button type="primary">添加题目</el-button>
      <el-select v-model="Select" style="margin-left: 10px" clearable class="m-2" placeholder="请选择分类" size="large" @change="handleChange">
        <el-option v-for="item in classify" :key="item.id" :label="item.title" :value="item.id" />
      </el-select>
    </div>
    <div class="questinTable">
      <el-table :data="topicList" border style="width: 100%">
        <el-table-column type="index" label="序列" align="center" width="80" />
        <el-table-column prop="title" label="题目" align="center" width="180" />
        <el-table-column prop="content" label="简介" align="center" />
        <el-table-column prop="degree" label="访问量" align="center" width="180" />
        <el-table-column prop="type" label="类型" align="center" width="180" />
        <el-table-column label="操作" align="center" width="230">
          <template #default="scoped">
            <el-button type="warning" @click="editItem(scoped.row)">修改</el-button>
            <el-button type="danger" @click="delItem(scoped.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:currentPage="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        small="false"
        background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import Service from './api/index'

export default {
  setup() {
    const Select = ref('')
    const currentPage = ref(10)
    const pageSize = ref(5)
    const pageNum = ref(1)
    const query = ref('')
    const props = {
      value: 'title'
    }
    const data = reactive({
      topicList: [],
      classify: []
    })

    const GetAllClassify = async () => {
      const res = await Service.getClassifyAll()
      data.classify = res.data
    }

    const questionList = async () => {
      const res = await Service.getQuestion({ type: Select.value })
      data.topicList = res.data
      currentPage.value = res.count
      pageNum.value = res.pagenum
    }

    const handleChange = () => {
      questionList()
    }

    const editItem = () => {}

    const delItem = async (val) => {
      await Service.delQuestion(val.id)
      questionList()
    }

    // 切换每页显示多少条
    const handleSizeChange = (val) => {
      pageSize.value = val
    }
    // 切换第几页
    const handleCurrentChange = (val) => {
      pageNum.value = val
    }

    onMounted(questionList(), GetAllClassify())

    return {
      Select,
      pageNum,
      query,
      currentPage,
      pageSize,
      props,
      handleChange,
      ...toRefs(data),
      delItem,
      editItem,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style lang="stylus" scoped>
.questionBody{
  width: 100%;
  padding-left: 2%;
  padding-right: 2%;
  box-sizing: border-box;
  .questinTable{
    margin-top: 2%;
  }
  .pagination{
  width: 100%;
  padding: 20px 0 0 25%;
  }
}
</style>
